// 定义一个名为 CategoryForm 的对象，用作 Vue 组件
const CategoryForm = {
    // 组件名称
    name: 'CategoryForm',
    // 组件模板
    template: `  
    <div v-if="visible" class="modal">  
      <div class="modal-overlay" @click="close"></div>  
      <div class="modal-content">  
        <header class="modal-header">  
          <h2>{{ formData.categoryId? '编辑分类' : '添加分类' }}</h2>  
          <button class="close-button"  @click="close">×</button> <!-- 右侧 -->
        </header>  
        <form @submit.prevent="submitForm">  
          <input type="hidden" v-model="formData.categoryId">  

          <!-- 表单输入字段 -->
          <div class="form-group">  
            <label for="categoryName">分类名称:</label>  
            <input type="text" id="categoryName" v-model="formData.categoryName" required>  
          </div>  
          <div class="form-group">  
            <label for="description">分类描述:</label>  
            <textarea id="description" v-model="formData.description"></textarea>  
          </div>  
          <div class="form-group">  
            <label for="status">分类状态:</label>  
            <select id="status" v-model="formData.status" required>  
              <option value="1">启用</option>  
              <option value="2">禁用</option>  
            </select>  
          </div>  

          <div class="form-group submit">  
            <input type="submit" :value="formData.categoryId? '更新分类' : '添加分类'">  
          </div>  
        </form>  
      </div>  
    </div>  
  `,
    // 局部注册组件
    components: {},

    // 组件属性
    props: {
        // 控制表单弹窗的显示与隐藏
        visible: {
            type: Boolean,
            default: false
        },
        // 从父组件传入的分类数据
        categoryData: {
            type: Object,
            default: () => ({})
        }
    },
    // 自定义事件
    emits: ['update:visible','submit'],
    // 组件设置函数
    setup(props, { emit }) {
        // 表单数据的初始值
        const initialValue = {
            categoryName: '',
            description: '',
            status: 1
        }

        // 使用 Vue.ref 创建响应式表单数据对象
        const formData = Vue.ref({})

        // 提交表单
        const submitForm = () => {
            emit('submit', {...formData.value });
            // close();
        };

        // 关闭弹框
        const close = () => {
            emit('update:visible', false);
        };

        // 监听 categoryData 的变化，同步更新表单数据
        Vue.watch(() => props.categoryData, (newCategoryData) => {
            formData.value = newCategoryData? {...newCategoryData } : {...initialValue };
        }, { immediate: true });

        // 返回表单数据及方法
        return {
            formData,
            submitForm,
            close
        };
    }
};